import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';
import NavItem from './NavItem';

@observer
class PageNav extends Component {

	@observable
	menuShow = true;

	@computed get menuStyle() {
		return {
			display: this.menuShow ? 'none' : 'none'
		}
	}

	@computed get buttonText() {
		return this.menuShow ? 'hide' : 'show';
	}

	@action
	handleClick = () => {
		this.menuShow = !this.menuShow;
	}

	render() {
		const navStyle={
			position: 'fixed',
			top: '0',
			right: '0',
			backgroundColor: '#fff',
			border: '1px solid blue',
			borderRadius: '5px',
		};
		const switchStyle = {
			float: "right",
			border: '1px solid lightblue',
			borderRadius: '3px',
			outline: 'none'
		};

		const navList = [
			{
				path: '/Register_Certification',
				text: 'Register_Certification'
			},
			{
				path: '/Register_Agreement',
				text: 'Register_Agreement'
			},
			{
				path: '/Register_SetUsername',
				text: 'Register_SetUsername'
			},
			{
				path: '/Login_MsgLogin',
				text: 'Login_MsgLogin'
			},
			{
				path: '/Login_PwdLogin',
				text: 'Login_PwdLogin'
			},
			{
				path: '/Login_ResetPwd',
				text: 'Login_ResetPwd'
			}
		];

		return (
			<div style={navStyle}>
				<button style={switchStyle} onClick={ this.handleClick }>{this.buttonText}</button>
				<div style={ this.menuStyle }>
					<ul>
						{
							navList.map((item, index) => {
								return (
									<NavItem key={index} to={item.path} label={item.text}/>
									// <li><Link to={item.path}>{item.text}</Link></li>
								)
							})
						}
					</ul>
				</div>
			</div>
		)
	}
}

export default PageNav